<template>
<div>
  <h2>测试class绑定</h2>
  <div class="basic" :class="classStr" @click="updateClass1">尚硅谷1</div>
  <div class="basic" :class="classObj" @click="updateClass2">尚硅谷2</div>
  <div class="basic" :class="classArr" @click="updateClass3">尚硅谷3</div>
</div>
</template>
<script>
export default{
  data(){
  	return {
  	  classStr:"normal",
  	  classObj:{
  	  	atguigu1:true,
  	  	atguigu2:false,
  	  },
  	  classArr:['atguigu1',"atguigu2","atguigu3"],
  	}
  },
  methods:{
  	updateClass1(){
  	  this.classStr=["happy","sad","normal"][Math.floor(Math.random()*3)]
  	},
  	updateClass2(){
  	  this.classObj.atguigu1=!this.classObj.atguigu1
  	  this.classObj.atguigu2=!this.classObj.atguigu2
  	},
  	updateClass3(){
  	  this.classArr.pop()
  	},
  }
}
</script>
<style scoped>
.basic{
  width:200px;
  height:100px;
  line-height:100px;
  text-align:center;
  border:1px solid black;
  margin-bottom:10px;
}
.normal{
  background-color:skyblue;
}
.happy{
  background-color:rgba(255,255,0,0.644);
}
.sad{
  background-color:gray;
}
.atguigu1{
  background-color:yellowgreen;
}
.atguigu2{
  font-size:30px;
}
.atguigu3{
  border-radius:20px;
}
</style>